<template>
  <div class="myHeader">
  	<el-row type="flex" class="row-bg" justify="space-around">
  		<el-col :span="18">
  			<div class="grid-content bg-purple-light">
			  	<div class="header-content header-wrap">
			  		<div class="header-left" @click="goHome">
			  			<img src="../assets/test_logo.png"/>
			  			考试系统
			  		</div>
			  		<div class="header-right">
			  			<router-link :to="{name:'myTest'}">
				  			<img src="../assets/test_icon2.png"/>
				  			{{name}}
				  		</router-link>&nbsp;&nbsp;&nbsp;
				  		<span @click="logout">退出</span>
			  		</div>
			  	</div>
			  </div>
  		</el-col>
  	</el-row>
  </div>
</template>

<script>
export default {
  name: 'myHeader',
  data () {
    return {
      name:''
    }
  },
  //获取id
  created:function(){
  	this.name=localStorage.getItem('name')
  },
  methods:{
  	//退出登录
  	logout(){
  		this.$confirm('确认退出？')
      .then(_ => {
      	localStorage.removeItem("id");
      	localStorage.removeItem("name");
        this.$router.push({
        	name:"login"
        })
      })
      .catch(_ => {});
  	},
  	//回到主页
  	goHome(){
  		this.$router.push({
        name:"myContentPage"
       })
  	}
  }
}
</script>

<style scoped>
.myHeader{height:40px;background-color: #4a4a4a;position: relative;z-index: 11;}
.header-wrap{overflow: hidden;}
.header-left{float: left;font-size: 14px;color: #fff;line-height: 40px;cursor: pointer;}
.header-left img{width:26%;vertical-align: middle;}
.header-right{float: right;font-size: 14px;line-height: 40px;color: #fff;cursor: pointer;margin-right: 10px;}
.header-right a{color: #fff;}
.header-right img{vertical-align: text-bottom;}
</style>
